<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="//ui.gg/lib/editor/editor.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body>

<style>
    body {padding: 20px;}
    h3 {padding: 20px 0;}
</style>

<!----------------------------------------------------------------------------------------->

<h3>filter</h3>
<section class="form filter">
    <form>
        <li><span>name</span><input type="text"></li>
        <li><span>time</span><input type="date"></li>
        <li><span>select</span><div class="select"><select><option selected disabled>select</option><option>select</option></select></div></li>
        <li><span>choice</span>
            <choice>
                <a>choice 1</a>
                <choice-list>
                    <a>choice 1</a>
                    <a>choice 2</a>
                </choice-list>
            </choice>
        </li>
        <li><a class="btn">search</a></li>
    </form>
</section>
<h3>form</h3>
<section class="form">
    <form>
        <li><span>account</span>
            <input class="wide-20" type="text" required>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>password</span>
            <div class="input wide-20"><input type="password" required><o class="password"></o></div>
            <cite class="co-red">Password error</cite>
        </li>
        <li><span>scaler</span>
            <scaler><input step="1" min="0" max="100" value="1"></scaler>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>radio</span>
            <div class="parent">
                <o class="radio"></o><span>radio</span>
                <o class="radio"></o><span>radio</span>
                <o class="radio"></o><span>radio</span>
            </div>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>checkbox</span>
            <div class="parent">
                <o class="checkbox"></o><span>checkbox</span>
                <o class="checkbox"></o><span>checkbox</span>
                <o class="checkbox checkbox-all"></o><span>checkbox all</span>
            </div>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>toggle</span>
            <o class="toggle"></o>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>progress</span>
            <progress class="wide-20" max="100" value="50"></progress>
        </li>
        <li><span>range</span>
            <input class="wide-20" type="range" min="0" max="100" step="0" value="50">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>file</span>
            <input class="wide-30" type="file">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>color</span>
            <input type="color">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>date</span>
            <input class="wide-20" type="date">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>datetime</span>
            <input class="wide-20" type="datetime-local">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>month</span>
            <input class="wide-20" type="month">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>week</span>
            <input class="wide-20" type="week">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>time</span>
            <input class="wide-20" type="time">
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>select</span>
            <div class="select wide-20"><select><option selected disabled>select</option><option>select</option></select></div>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>choice</span>
            <choice class="wide-20">
                <a>choice 1</a>
                <choice-list>
                    <a>choice 1</a>
                    <a>choice 2</a>
                </choice-list>
            </choice>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>robot</span>
            <input class="wide-10" type="text">
            <a class="code" uigg="color"><img uigg="color"></a>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>code</span>
            <input class="wide-10" type="text">
            <a class="btn code">get code</a>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li><span>message</span>
            <textarea class="wide"></textarea>
        </li>
        <li><span>editor</span>
            <div class="editor-simple"></div>
        </li>
        <li><span>images</span>
            <div class="upload">
                <div class="ico upload-group"><input type="file" accept=".jpg,.jpeg,.png,.webp,.gif"><horn class="ico"></horn></div>
                <div class="ico upload-add"></div>
            </div>
            <cite>Lorem ipsum dolor sit amet</cite>
        </li>
        <li class="resolve"><o class="checkbox"></o><span>I've read and agreed</span><a>"User agreement"</a></li>
        <li class="resolve"><button class="btn btn-submit">cancel</button><button class="btn btn-submit">submit</button></li>
    </form>
</section>

<!----------------------------------------------------------------------------------------->

</body>
</html>